<template>
  <div>
    <div class="box">
      <div class="topBar">
        <el-form
          ref="queryForm"
          :model="queryForm"
          :inline="true"
          label-width="120px"
          rule="quertRules"
        >
          <el-form-item label="客户名称：" prop="custNm">
            <el-input v-model="queryForm.custNm" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="客户类型：" prop="isNewCust">
            <el-input v-model="queryForm.isNewCust" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="债券名称：" prop="bondShortNm">
            <el-input v-model="queryForm.bondShortNm" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="债券编码：" prop="bondCd">
            <el-input v-model="queryForm.bondCd" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="推荐规则：" prop="recoRuleNm">
            <el-input v-model="queryForm.recoRuleNm" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="数据日期：" prop="dataDate">
            <el-date-picker
              v-model="queryForm.dataDate"
              type="date"
              value-format="yyyyMMdd"
            />
          </el-form-item>
        </el-form>
        <div>
          <el-row>
            <el-col :span="8" style="text-align: right; float: right">
              <el-button type="primary" @click="getData" class="gray-btn">查询</el-button>
              <el-button type="primary" @click="resetFrom" class="btn">重置</el-button>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="bottomInfo">
        <el-table :data="tableData" style="// width: 100%">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column
            v-for="(item, index) in tableColumns"
            :prop="item.column"
            :label="item.label"
            :width="item.width"
          >
            <template slot-scope="scope">
              <span
                v-if="item.label == '债券简称'"
                class="link"
                @click="toLink(scope.row)"
                >{{ scope.row[item.column] }}</span
              >
              <span v-else>{{ scope.row[item.column] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageFn"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getList1 } from "@/api/customerManagement/bondMarketingList";
export default {
  data() {
    return {
      queryForm: {
        custNm: "",
        isNewCust: "",
        bondShortNm: "",
        bondCd: "",
        recoRuleNm: "",
        dataDate: "",
      },
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      quertRules: {},
      //   tableColumns: [],
      tableColumns: [
        //  主体评级调低的企业
        {
          column: "custNm",
          label: "客户名称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "bondCd",
          label: "债券编码",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "bondShortNm",
          label: "债券简称",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 240,
        },
        {
          column: "issueStartDt",
          label: "发行日",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 260,
        },

        {
          column: "ruleScore",
          label: "推荐指数",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "recoRuleNm",
          label: "推荐规则",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
        },
        {
          column: "isNewCust",
          label: "客户类型",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
        {
          column: "dataDate",
          label: "数据日期",
          align: "left",
          overflow: true, // 超出长度
          show: true, // 是否显示
          // width: 120,
        },
      ],
    };
  },

  mounted() {
    this.getData();
  },
  methods: {
    resetFrom() {
      this.$refs.queryForm.resetFields();
      this.pageNum = 1;
      this.pageSize = 10;
      this.getData();
    },

    getData() {
      try {
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...this.queryForm,
        };
        Object.keys(params).forEach((item) => {
          if (params[item] == "") {
            delete params[item];
          }
        });
        getList1(params).then((res) => {
          console.log(res);
          if (res) {
            this.tableData = res.data.records;
            this.pageNum = res.data.current;
            this.pageSize = res.data.size;
            this.total = res.data.total;
          }
        });
      } catch (error) {}
    },
    toLink(row) {
      localStorage.setItem("bondId", row.bondCd);
      this.$router.push({
        name: "bondRiskProfileDetail",
        query: {
          bondId: row.bondCd,
        },
      });
    },
    pageFn(num) {
      this.pageNum = num;
      this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .topBar {
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }

  .bottomInfo {
    flex: 1;
    // width: 100%;
    background-color: #262d47;
    padding-bottom: 20px;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }

  .el-table {
    min-height: 440px;
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .bondCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
.update_text {
  color: #fff;
  text-align: right;
  margin: 10px 10px 10px 0px;
}
::v-deep {
  .el-dialog {
    .el-icon-date {
      height: 30px !important;
      line-height: 30px !important;
    }
    .el-range-separator {
      color: #ffffff !important;
      background-color: #363657 !important;
      height: 30px !important;
      line-height: 30px !important;
      z-index: 10;
    }
    .el-input__inner {
      border: 1px solid rgba(126, 163, 255, 0.3) !important;
      color: #ffffff !important;
      background-color: #363657 !important;
      height: 30px !important;
      line-height: 30px !important;
      .el-range-input {
        background-color: #363657 !important;
        height: 28px !important;
        line-height: 28px !important;
      }
    }
  }
}
.link {
  color: #1f9bfd;
  border-bottom: 1px solid #1f9bfd;
  cursor: pointer;
}
</style>
